import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_syt/api/api.dart';
import 'package:flutter_syt/datas/categroy_item.dart';
import 'package:flutter_syt/theme/font_styles.dart';
import 'package:flutter_syt/theme/theme_color.dart';
import 'package:flutter_syt/utils/click_utils.dart';

class FeedbackDialogHelper {
  static showBottom(BuildContext context,
      {List<String> categoryList = const [],
      ValueChanged<String?>? onChanged}) async {
    return showModalBottomSheet(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(8),
          topRight: Radius.circular(8),
        ),
      ),
      isScrollControlled: true,
      context: context,
      builder: (BuildContext context) {
        return Container(
          padding: EdgeInsets.all(15.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                alignment: Alignment.center,
                padding: EdgeInsets.only(bottom: 15.0),
                child: Text(
                  '选择功能',
                  style: FontStyles.headerTextStyle_16.copyWith(
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Container(
                constraints: BoxConstraints(
                  maxHeight: 400,
                ),
                child: ListView.separated(
                  separatorBuilder: (context, index) {
                    return Divider(
                      height: 1,
                      color: Color(0xFFEFEFEF),
                    );
                  },
                  shrinkWrap: true,
                  itemCount: categoryList.length,
                  itemBuilder: (BuildContext context, int index) {
                    return ListTile(
                      title: Container(
                        child: Text(
                          categoryList[index],
                          style: TextStyle(
                            fontSize: 16,
                            color: ThemeColor.colorBlack100,
                          ),
                        ),
                      ),
                      onTap: ClickUtils.debounce(() {
                        onChanged!(categoryList[index]);
                        Navigator.pop(context, index);
                      }),
                    );
                  },
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

class CategoryDropdownButton extends StatefulWidget {
  final String title;
  final ValueChanged<String?>? onChanged;
  final bool show;
  const CategoryDropdownButton(
      {required this.title, this.onChanged, this.show = false});

  @override
  _CategoryDropdownButtonState createState() => _CategoryDropdownButtonState();
}

class _CategoryDropdownButtonState extends State<CategoryDropdownButton>
    with AutomaticKeepAliveClientMixin {
  String? value;

  List<String> categoryList = [];

  loadData() async {
    List<CategoryItem> categoryAll = await API.shared.common.category(0);
    setState(() {
      categoryList.addAll(
        categoryAll.map((e) => e.name).toList(),
      );
      // value = categoryAll.position1[0].name;
    });
  }

  @override
  void initState() {
    loadData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    if (!widget.show) {
      return Container();
    }
    return GestureDetector(
      onTap: ClickUtils.debounce(() {
        FeedbackDialogHelper.showBottom(
          context,
          categoryList: categoryList,
          onChanged: (String? category) {
            setState(() {
              value = category;
            });
            widget.onChanged!(category);
          },
        );
      }),
      child: Container(
        width: double.infinity,
        height: 45,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          border: Border.all(
            color: Color(0xFFD1D1D1),
            width: 0.5,
          ),
        ),
        padding: EdgeInsets.symmetric(vertical: 0, horizontal: 15),
        margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              value ?? '请选择${widget.title}',
              style: FontStyles.headerTextStyle_16.copyWith(
                color: ThemeColor.colorBlack80,
              ),
            ),
            Container(
              padding: EdgeInsets.only(top: 2),
              alignment: Alignment.center,
              child: Image.asset(
                'assets/icons/icon_right.png',
                width: 6,
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
